body { 
    padding-top: 56px; 
    font-size: 120%;
    }
.left-aligned { margin-left: auto; }
.bg-dark {background-color: #2A4A7C !important;}
.bg-tde {background-color: #9ec9ad !important;}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/* Bilder sind standardmäßig grau und werden erst bei hover farbig und größer*/
.grayimg {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.grayimg:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transform: scale(1.1);
}

/*Einfügen von Barlow Condensed*/
@font-face {
    font-family: 'Barlow Condensed';
    src: url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-regular.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-blackitalic.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-bold.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-bolditalic.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-extrabold.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-extrabolditalic.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-extralight.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-extralightitalic.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-italic.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-light.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-lightitalic.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-medium.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-semibold.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-semibolditalic.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-thin.ttf), 
         url(https://static.igem.wiki/teams/4669/wiki/barlow-condensed/barlow-condensed/barlowcondensed-thinitalic.ttf);
    font-weight: normal;
    font-style: normal;
}
/* Welle als Hintergrund fürs Menü*/

.menu-wave {
    background-image: url(https://static.igem.wiki/teams/4669/wiki/design-elements/header-wave.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
}

/*Hover über Absatz farbiger Hintergrund*/

#divcolor p:hover {
    background-color: palegoldenrod
}

/* Button from bottom to top*/

.button-Up {
    transition: .3s;
    opacity: .5;
}
.button-Up:hover {
    opacity: 1;
}
#button-Up{
    position: fixed;
    display: block;
    bottom: 7.5%;
    right: 0;
    height: 50px;
    width: auto;
    opacity: 0;
}
#button-Up:hover{
    opacity: 1;
    cursor: pointer;
}
.button-Up-show {
    animation: showUp 1s;
    animation-fill-mode: forwards;
}
@keyframes showUp {
    from {opacity: 0;}
    to {opacity: 0.5;}
}
.button-Up-off {
    animation: showOff 0.5s;
    animation-fill-mode: forwards;
}
@keyframes showOff {
    from {opacity: 0.5;}
    to {opacity: 0;}
}

/* Sponsoren Durchlaufbanner */
.sponsor-banner {
    width: 100%;
    overflow: hidden; /* Um sicherzustellen, dass die Bilder im sichtbaren Bereich bleiben */
    background-color: #2A4A7C; /* Hintergrundfarbe des Banners */
}
  
.sponsor-images img {
    height: 60px; /* Höhe der Bilder anpassen */
    margin-right: 20px; /* Abstand zwischen den Bildern */
    margin-bottom: 10px;
}
  
:root {
    --total-width: 0; /* Standardwert, kann angepasst werden */
}

.sponsor-images {
    display: flex;
    animation: scroll 15s linear infinite; /* Durchlaufgeschwindigkeit; kürzer = schneller */
    animation-play-state: running; /* Die Animation läuft standardmäßig */
}


@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(calc(-1 * var(--total-width)));
    }
}